<template>
  <div class="home-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <el-row :gutter="8">
      <el-col
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 18 }"
        :xl="{ span: 18 }"
        style="padding-right: 8px; margin-bottom: 30px"
      >
        <transaction-table />
      </el-col>
      <el-col
        :xs="{ span: 24 }"
        :sm="{ span: 12 }"
        :md="{ span: 12 }"
        :lg="{ span: 6 }"
        :xl="{ span: 6 }"
        style="margin-bottom: 30px"
      >
        <box-card />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import panelGroup from './components/PanelGroup.vue'
import transactionTable from './components/TransactionTable.vue'
import boxCard from './components/BoxCard.vue'

function handleSetLineChartData(type) {
  console.log(`emit传参：${type}`)
}
</script>
<style lang="scss" scoped>
.home-container {
  padding: 32px;
  background-color: #f0f2f5;
  position: relative;
}
</style>
